<template>
	<view class="pd pt20 pm20 ">
		<view class=" display-flex pd pt20 pm20 yj8 bgff box">
			<view class="flex-1 display-flex">
				<image src="../../static/img/logo.jpg" class="cz dfdscxzrty"></image>
				<view class="ml20 flex-1 vertical-center tl">
					<view class="">
						<view class="fz32">
							张三 <text class="tag-label ab">离职</text>
						</view>
						<view class="z9 fz24 mt20">
							工作幸苦了~
						</view>
					</view>
				</view>
			</view>
			<view class=" vertical-center">
				<view class="bkxczr ab">
					{{year}}年{{month}}月 <text class="iconfont icon-down fz24"></text>
				</view>
			</view>
		</view>

		<view class="bgff mt20 pt40 pm40 z9 cen yj8 box">
			暂无薪资信息
		</view>
	</view>
	<view class="kkxzczxertrt vertical-bottom">
		<view class="w100 bgff ">
			<view class="display-flex pd pt20 pm20 bbm">
				<view class="z9 fz32 flex-1">
					取消
				</view>
				<view class="ls fz32 pl40">
					确认
				</view>
			</view>
			<picker-view 
			:indicator-style="indicatorStyle" 
			:value="value"
			 @change="bindChange"
			  class="fdccdfrtrt">
				<picker-view-column>
					<view class="item vertical-center" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item vertical-center" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from "vue"
	const indicatorStyle = `height: 50px;`
	const date = new Date()
	const years = ref([])
	const months = ref([])
	const year = ref()
	const month = ref()
	year.value = date.getFullYear()
	 month.value =  date.getMonth() + 1
	 const day = date.getDate()
	const value = ref([9999, month.value - 1,day])

	for (let i = 1990; i <= date.getFullYear(); i++) {
		years.value.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.value.push(i)
	}


	const bindChange = (e) => {
		const val = e.detail.value
		console.log(val)
		year.value = years.value[val[0]]
		month.value =months.value[val[1]]
	}
</script>

<style scoped>
	.dfdscxzrty {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.kkxzczxertrt {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.fdccdfrtrt {
		height: 600rpx;
	}
</style>